<template>
  <!-- 头部轮播组件 -->
  <view class="banner-box">
    <!-- 轮播图的背景颜色 -->
    <view class="banner-bg" :style="{'background-image': `linear-gradient(${background || '#345dc2'}, 50%, #F8F9FB)`}"></view>
    <!-- 轮播图 -->
    <swiper class="banner-swiper" indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#fff" indicator-dots autoplay :interval="2500" circular @change="changeSwiper">
      <swiper-item class="banner-item" v-for="banner in bannerList" :key="banner.id">
        <image :src="banner.imageUrl"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    props: {
      bannerList: {
        type: Array,
        default: () => [
          {
            id: 1,
            imageUrl: "/static/images/banner1.jpg",
            background: "#45328c",
            advertUrl: '/pages/course/course-details'
          },
          {
          id: 2,
            imageUrl: "/static/images/banner2.jpg",
            background: "#006C00",
            advertUrl: '/pages/course/course-details'
          },
          {
          id: 3,
            imageUrl: "/static/images/banner3.jpg",
            background: "#0072B7",
            advertUrl: '/pages/course/course-details'
          }
        ]
      }
    },
    data() {
      return {
        // 当前轮播图的下标
        index: 0,
        // 当前轮播图的背景颜色
        background: ''
      }
    },
    methods: {
      changeSwiper(event) {
        this.index = event.detail.current;
        this.background = this.bannerList[this.index].background
      }
    },
    watch: {
      bannlistList: {
        handler(list) {
          if (list && list.length) {
            this.index = 0
            this.background = this.bannerList[0] && this.bannerList[0].background
          }
        },
        // 首次绑定值时 就触发此handler
        immediate: true
      }
    }
  }
  
</script>

<style lang="scss">
  .banner-box {
    position: relative;
    width: 100%;
    padding-top: 120rpx;
    // 如果是app，需要加上 状态栏的高度
    /* #ifdef APP-PLUS */
    padding-top: calc(var(--status-bar-height) + 120rpx);
    /* #endif */
    .banner-bg {
      position: absolute;
      width: 100%;
      height: 470rpx;
      top: 0;
      /* #ifdef APP-PLUS */
      height: calc(var(--status-bar-height) + 470rpx);
      /* #endif */
      // background-color: green;
    }
    .banner-swiper {
      height: 350rpx;
      width: 100%;
      .banner-item {
        width: 100%;
        height: 100%;
        padding: 0 30rpx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
          border-radius: 15rpx;
        }
      }
    }
  }
</style>
